<template>
  <div style="height:60px;"></div>
  <!--perfect-scrollbar-->
  <c-scrollbar id="area_scrollbar">
  <el-menu default-active="1">
    <el-menu-item index="1" @click="$router.push('/table')">
      <i class="material-icons menu-list-icon" style="font-size: 20px;">home</i>
      <template #title><span class="unselectable">驾驶舱</span></template>
    </el-menu-item>
    <el-menu-item index="2" @click="$router.push('/table')">
      <i class="material-icons menu-list-icon" style="font-size: 20px;">cached</i>
      <template #title><span class="unselectable">数据采集</span></template>
    </el-menu-item>
    <el-sub-menu index="3">
      <template #title>
        <i class="material-icons menu-list-icon" style="font-size: 20px;">build</i>
        <span class="unselectable">方案配置</span>
      </template>
        <el-menu-item index="3-1" @click="$router.push('/')"><span class="unselectable">PF费率制</span></el-menu-item>
        <el-sub-menu index="3-2">
          <template #title>RBRVS</template>
          <el-menu-item index="1-2-1">项目点数</el-menu-item>
          <el-menu-item index="1-2-2">项目点值</el-menu-item>
          <el-menu-item index="1-2-3">点数调整</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3-3">
          <template #title>综合考核</template>
          <el-menu-item index="3-3-1">DRG考核</el-menu-item>
          <el-menu-item index="3-3-2">KPI考核</el-menu-item>
        </el-sub-menu>
    </el-sub-menu>
    <el-menu-item index="4">
      <i class="material-icons menu-list-icon" style="font-size: 20px;">euro_symbol</i>
      <template #title><span class="unselectable">奖金核算</span></template>
    </el-menu-item>
    <el-menu-item index="5">
      <i class="material-icons menu-list-icon" style="font-size: 20px;">credit_card</i>
      <template #title><span class="unselectable">奖金发放</span></template>
    </el-menu-item>
    <el-menu-item index="6">
      <i class="material-icons menu-list-icon" style="font-size: 20px;">widgets</i>
      <template #title><span class="unselectable">奖金报表</span></template>
    </el-menu-item>
    <el-menu-item index="7">
      <i class="material-icons menu-list-icon" style="font-size: 20px;">settings</i>
      <template #title><span class="unselectable">系统设置</span></template>
    </el-menu-item>
  </el-menu>
  <!--/perfect-scrollbar-->
  </c-scrollbar>
</template>

<script lang="ts">

export default ({
  setup() {
    const handleOpen = (key, keyPath) => {
      console.log(key, keyPath)
    }
    const handleClose = (key, keyPath) => {
      console.log(key, keyPath)
    }
    return {
      handleOpen,
      handleClose,
    }
  },
  mounted() {
  },
  computed: {
  }
})
</script>

<style>
.el-menu{
  --el-menu-hover-background-color: rgb(0 186 173 / 30%)!important;
}
.ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
    background-color: rgba(238, 238, 238, 0);
    opacity: 0.6;
}
.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
    background-color: rgba(153, 153, 153, 0.7);
    width: 8px;
}
</style>

<style scoped>
#area_scrollbar{
  height: calc(100vh - 60px);

}
.el-menu-item.is-active, .el-menu-item.is-active:focus, .el-menu-item:focus{
  background-color: rgba(0, 186, 173, 1);
  color: white;
  border-right: 3px solid rgb(0, 150, 136);
}
.el-dropdown-menu{
  width: 100px;
  text-align: center;
}
.el-menu{
  overflow-x: hidden;
  overflow-y: overlay;
  border-right: 0;
}
.ps{
  height: calc(100vh - 60px);
}

.menu-list-icon{
  margin-left: 3px;
  margin-right: 5px;
    text-align: center;
    position: relative;

vertical-align: middle;
}
</style>
